<template>
	<view class="level">
		<view class="header">
			<view class="title" :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px' }">
				<uni-nav-bar backgroundColor="transparent" title="单词消消乐" left-icon="left" @clickLeft="goback" />
			</view>

			<view class="book" :style="{ marginTop: globalData.statusBarHeight + globalData.toBar + 'px' }">
				<view class="book-title">
					<view class="line"></view>
					{{ item.name }}
				</view>
				<view class="switchBook" @click="switchbook">
					<image style="width: 32rpx; height: 32rpx" src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/switch.png" mode=""></image>
					<span>切换课本</span>
				</view>
			</view>
		</view>
		<view class="content" :style="{ height: contentHeight, top: globalData.statusBarHeight + globalData.toBar + 90 + 'px', bottom: '20rpx' }">
			<scroll-view scroll-y="true" :style="{ height: contentHeight, top: globalData.statusBarHeight + globalData.toBar + 90 + 'px', bottom: '20rpx' }">
				<template v-for="(item, index) in levelData">
					<!-- //解锁 -->
					<view class="level-card" @click="goGame(item)" v-if="index == 0 ? true : levelData[index - 1].bestcost !== 0">
						<view class="card-num">{{ item.stage }}</view>
						<view class="card-content">
							<h3>第{{ item.stage }}关</h3>
							<view class="content-bottom">
								<view class="" style="color: #999999">
									共
									<span style="color: #fe8926">{{ item.count }}</span>
									个单词
								</view>
								<view class="allnum-line"></view>
								<view class="" style="color: #cccccc" v-if="item.bestcost">最好成绩：{{ item.bestcost }}s</view>
							</view>
						</view>
						<image
							class="arr-right"
							style="width: 32rpx; height: 32rpx"
							src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/right.png"
							mode=""
						></image>
					</view>
					<!-- 未解锁 -->
					<view class="level-card" v-else>
						<view class="card-num card-numLocked">{{ item.stage }}</view>
						<view class="card-content">
							<h3 class="h3-locked">第{{ item.stage }}关</h3>
							<view class="content-bottom">
								<view class="" style="color: #b3b3b3">
									共
									<span style="color: #fe8926">{{ item.count }}</span>
									个单词
								</view>
							</view>
						</view>
						<image
							src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/lock.png"
							style="width: 64rpx; height: 64rpx; margin-left: 248rpx"
							mode=""
						></image>
						<image
							class="arr-right"
							style="width: 32rpx; height: 32rpx"
							src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/right.png"
							mode=""
						></image>
					</view>
				</template>
			</scroll-view>
		</view>
		<uni-popup ref="popup" mask-background-color="rgba(0, 0, 0, 0.80)">
			<view class="popup-content">
				<view class="text-content">将所有词汇与相应的释义进行配对 配对成功即可消除，直至全部匹配成功！</view>

				<view class="btn" @click="start">开始挑战</view>
			</view>
			<view class="line-yellows" v-if="topData.length > 0">
				<view class="line-yellow"></view>
				<view class="line-yellow"></view>
			</view>
			<view class="popu-footer" v-if="topData.length > 0">
				<view class="footer-top">
					<view class="" style="width: 80rpx; text-align: center">排名</view>

					<view class="" style="width: 230rpx; text-align: center">用户ID</view>
					<view class="">用时时长</view>
				</view>
				<view class="scroy">
					<view class="top-item" v-for="(item, index) in topData.slice(0, 4)">
						<view class="indexs" v-if="index == 0">
							<image src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/top/one.png" mode="" style="width: 48rpx; height: 48rpx"></image>
						</view>
						<view class="indexs" v-else-if="index == 1">
							<image src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/top/two.png" mode="" style="width: 48rpx; height: 48rpx"></image>
						</view>
						<view class="indexs" v-else-if="index == 2">
							<image src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/top/three.png" mode="" style="width: 48rpx; height: 48rpx"></image>
						</view>
						<view class="index" v-else>
							{{ index + 1 }}
						</view>

						<view class="top-user">
							<image
								class="avatar"
								:src="
									item.avatar
										? `https://www.aikoolearn.com/video-dev${item.avatar}`
										: 'https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user-avatar.png'
								"
								mode=""
								style="width: 64rpx; height: 64rpx"
							></image>
							<view class="nickName">
								{{ item.nickName }}
							</view>
						</view>
						<view class="">{{ item.cost / 1000 }}s</view>
					</view>
					<view
						@click="gopage"
						class="moreMessage"
						style="color: #999999; text-align: center; margin-top: 30rpx; font-size: 24rpx; display: flex; align-items: center; justify-content: center"
					>
						查看更多完整信息
						<image src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/arr-right.png" mode="" style="width: 24rpx; height: 24rpx"></image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getLevel, getTop, getremain } from '@/services/level.js';

import { getHistory } from '@/services/login.js';
export default {
	data() {
		return {
			globalData: null,
			contentHeight: 0,
			levelData: [],
			selected: {},
			item: {}, //信息
			historyId: '',
			topData: [],
			Passindex: 0,
			remain: 0
		};
	},
	onLoad(options) {
		let item = JSON.parse(options.item);
		this.item = item;
		this.getLevelData(this.item.rid);
		this.getremainData();
	},
	created() {
		// 在组件创建时获取 globalData
		try {
			this.globalData = wx.getStorageSync('globalData');
			this.calculateContentHeight();
		} catch (error) {
			// 处理获取存储失败的情况
			console.error('Failed to get globalData from storage:', error);
		}
	},
	onShow() {
		this.getLevelData(this.item.rid);
	},

	methods: {
		async getremainData() {
			const res = await getremain();
			if (res.code == 200) {
				this.remain = res.data;
			}
		},
		async getHistoryData(data) {
			const res = await getHistory(data);
			if (res.code == 200) {
				let time = res?.rows[0]?.cost || 0;
				if (time) {
					return time / 1000;
				} else {
					return 0;
				}
			}
		},
		async getTopData(data, index, size) {
			const res = await getTop(data, index, size);
			if (res.code == 200) {
				this.topData = res.data.data;
			}
		},
		gopage() {
			this.$refs.popup.close();
			uni.navigateTo({
				url: '/pages/ingame/leaderBoard?item=' + JSON.stringify(this.selected)
			});
		},
		goback() {
			uni.navigateBack();
		},
		async getLevelData(id) {
			const res = await getLevel(id);
			if (res.code == 200) {
				let prevBestCost = 0;
				// 映射 levelData 数组，并返回一个 Promise 数组
				const promises = res.rows.map(async (item, index) => {
					// 调用 getHistoryData 并等待其完成
					const bestcost = await this.getHistoryData({ libId: item.libId, stage: item.stage });

					if (bestcost !== 0) {
						this.Passindex = index;
					}

					// 返回一个新的对象，包含原始数据、最佳成本以及 ispass
					return {
						...item,
						bestcost
					};
				});

				// 使用 Promise.all 等待所有的 Promise 完成，并获取结果
				this.levelData = await Promise.all(promises);
			}
		},
		calculateContentHeight() {
			const statusBarHeight = this.globalData.statusBarHeight;
			const toBarHeight = this.globalData.toBar;
			const additionalHeight = 100; // 额外的 60px

			// 计算内容高度
			const contentHeight = `calc(100vh - (${statusBarHeight}px + ${toBarHeight}px + ${additionalHeight}px))`;

			this.contentHeight = contentHeight;
		},
		switchbook() {
			uni.navigateBack();
		},
		goGame(item) {
			this.selected = item;
			this.getTopData({ libId: item.libId, stage: item.stage }, 0, 20);
			this.$refs.popup.open();
		},
		start() {
			if (this.remain > 0) {
				this.$refs.popup.close();
				uni.navigateTo({
					url: '/pages/ingame/index?item=' + JSON.stringify(this.selected)
				});
			} else {
				wx.showToast({
					title: '今日次数已用尽，明日再来吧！',
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.level {
	height: 100vh;
	position: relative;
	.header {
		width: 100%;
		height: 360rpx;
		background-color: #fff;
		overflow: hidden;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.title {
			position: absolute;
			width: 100%;
			left: 50%;
			/* top: 20px; */
			transform: translate(-50%, 0);
			color: white;
			font-size: 32rpx;
		}
		.book {
			width: 702rpx;
			height: 112rpx;
			background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%);
			border-radius: 24rpx;
			margin: 0 auto;
			color: #ffffff;
			display: flex;
			align-items: center;
			padding: 34rpx 18rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.switchBook {
				font-size: 28rpx;
				// margin-left: 312rpx;
				width: 196rpx;
				height: 64rpx;
				background: #9becd8;
				border-radius: 32rpx;
				color: #0fb09b;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.book-title {
				display: flex;
				align-items: center;
			}
		}
	}
	.line {
		width: 8rpx;
		height: 32rpx;
		background: #ffffff;
		border-radius: 4rpx;
		margin-left: 6rpx;
		margin-right: 16rpx;
	}

	.scroy {
		height: 550rpx;
		overflow-y: scroll;
	}
	.content {
		width: 100%;
		background-color: #f0f2f5;
		position: absolute;
		border-radius: 47.71rpx 47.71rpx 0 0;
		overflow: hidden;
		.level-card {
			width: 351px;
			height: 75px;
			background: #ffffff;
			border-radius: 12px;
			margin: 22.901rpx auto;
			display: flex;
			align-items: center;
			padding: 24rpx;
			box-sizing: border-box;
			position: relative;
			.card-num {
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%);
				border-radius: 12px;
				color: #fff;
				font-size: 64rpx;
				text-align: center;
			}
			.card-content {
				margin-left: 32rpx;
				.content-bottom {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}

		.card-numLocked {
			background: #cfefeb !important;
		}
		.h3-locked {
			color: #b3b3b3;
		}
	}

	.allnum-line {
		width: 3rpx;
		height: 20rpx;
		background-color: #cccccc;
		margin: 0 10rpx;
	}
	.arr-right {
		position: absolute;
		right: 20rpx;
	}
	.popu-footer {
		width: 588rpx;
		height: 638rpx;
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow-y: scroll;
		position: relative;
	}
	.line-yellows {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		margin: 0 auto;
	}
	.line-yellow {
		width: 16rpx;
		height: 50rpx;
		background: #e6c87c;
	}
	.footer-top {
		padding: 10rpx;
		margin-top: 20rpx;
		width: 100%;
		justify-content: space-evenly;
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 28rpx;
	}
	.popup-content {
		width: 588rpx;
		height: 596rpx;
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		.text-content {
			width: 508rpx;
			height: 192rpx;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 200rpx;
		}
		.btn {
			width: 428rpx;
			height: 88rpx;
			background: #fe8926;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(254, 137, 38, 0.4);
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			margin-top: 80rpx;
		}
	}
	.moreMessage {
		position: absolute;
		bottom: 25rpx;
		transform: translate(50%, 0);
		width: 300rpx;
	}
	.top-item {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding: 20rpx 10rpx;
		.index {
			width: 40rpx;
			text-align: center;
		}
		.top-user {
			display: flex;
			align-items: center;
			color: #666666;

			width: 230rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.nickName {
				width: 145rpx;
				margin-left: 10rpx;
				font-size: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
	::v-deep {
		.uni-navbar--border {
			border-bottom-color: transparent !important;
		}
	}
}
</style>
